import './Theme.scss'
import { Button } from 'antd'
import { useState } from 'react'
import { useMount } from 'ahooks'
import PropTypes from 'prop-types'
import { useRequest } from 'alova'

import { Http } from '../../Api'
import { UseConfigSection } from '../../Template/FormTemplate'
import { GetIndexedDB, PutIndexedDB } from '../../Utils/IndexedDB'
import { ThemeIsEnabled, FontFamily, FontWeight } from '../../Config/typelist'

const ThemeLogo = ({ Off }) => {
    ThemeLogo.propTypes = { Off: PropTypes.func }
    const [data, setData] = useState()

    const LogoList = [
        { label: '样式一', value: 'LogoA01' },
    ]

    const list = [
        { key: 999, uuid: 'ThemeSet', label: '渲染样式', type: 'SelectTemp', name: 'logo', options: LogoList },
        { key: 100, uuid: 'LogoSet', label: '展开宽度', type: 'InputNumberTemp', name: 'width' },
        { key: 101, uuid: 'LogoSet', label: '开启遮罩', type: 'RadioTemp', name: 'blurState', options: ThemeIsEnabled },
        { key: 102, uuid: 'LogoSet', label: '遮罩颜色', type: 'ColorPickerTemp', name: 'blurColor' },
        { key: 103, uuid: 'LogoSet', label: '遮罩高斯', type: 'InputNumberTemp', name: 'blurFilter' },
        { key: 104, uuid: 'LogoSet', label: 'LOGO大小', type: 'InputNumberTemp', name: 'imgSize' },
        { key: 105, uuid: 'LogoSet', label: 'LOGO圆角', type: 'InputNumberTemp', name: 'imgRadius' },
        { key: 106, uuid: 'LogoSet', label: '项目标题', type: 'InputTemp', name: 'customTitle' },
        { key: 107, uuid: 'LogoSet', label: '标题字号', type: 'InputNumberTemp', name: 'customSize' },
        { key: 108, uuid: 'LogoSet', label: '标题字色', type: 'ColorPickerTemp', name: 'customColor' },
        { key: 109, uuid: 'LogoSet', label: '标题加粗', type: 'SelectTemp', name: 'customWeight', options: FontWeight },
        { key: 110, uuid: 'LogoSet', label: '标题字体', type: 'SelectTemp', name: 'customFamily', options: FontFamily },
        { key: 111, uuid: 'LogoSet', label: '副标题', type: 'InputTemp', name: 'smallTitle' },
        { key: 112, uuid: 'LogoSet', label: '标题字号', type: 'InputNumberTemp', name: 'smallSize' },
        { key: 113, uuid: 'LogoSet', label: '标题字色', type: 'ColorPickerTemp', name: 'smallColor' },
        { key: 114, uuid: 'LogoSet', label: '标题加粗', type: 'SelectTemp', name: 'smallWeight', options: FontWeight },
        { key: 115, uuid: 'LogoSet', label: '标题字体', type: 'SelectTemp', name: 'smallFamily', options: FontFamily },
        { key: 116, uuid: 'LogoSet', label: '标题阴影', type: 'ColorPickerTemp', name: 'textShadow' },
    ]

    useMount(async () => {
        const Theme = await GetIndexedDB('theme')
        setData(Theme)
    })

    const { send: posData } = useRequest((params) => Http({ url: 'posSaveJsonInfoBy', params, path: ['theme/theme'] }), { immediate: false })

    const onSubmit = async () => {
        const params = JSON.stringify(JSON.stringify(data))
        posData(params).then(async () => {
            await PutIndexedDB('theme', data)
            window.location.reload()
        })
    }

    if (data) {
        return (
            <div className='Theme'>
                {UseConfigSection(data, list)}
                <div className='Button'>
                    <Button type='primary' danger onClick={Off}>取消</Button>
                    <Button type='primary' onClick={onSubmit}>保存</Button>
                </div>
            </div>
        )
    }
};

export default ThemeLogo;